<template>
    <div>
        <el-page-header @back="logout" :icon="ArrowLeft" title="退出登录">
            <template #content>
                <span class="text-large font-600 mr-3"> 添加用户 </span>
            </template>
        </el-page-header>

        <div class="form-container">
            <el-form ref="ruleFormRef" :hide-required-asterisk="true" label-position="top" :model="ruleForm"
                :rules="rules" label-width="80px" status-icon>
                <el-form-item label="姓名" prop="username">
                    <el-input placeholder="请输入姓名" clearable v-model="ruleForm.username" />
                </el-form-item>
                <el-form-item label="账号/手机号" prop="phone">
                    <el-input placeholder="请输入账号/手机号" clearable v-model="ruleForm.phone" />
                </el-form-item>
                <el-form-item label="密码" prop="pwd">
                    <el-input placeholder="请输入密码" type="password" clearable v-model="ruleForm.pwd" />
                </el-form-item>
                <el-form-item label="确认密码" prop="rePwd">
                    <el-input placeholder="请输入确认密码" type="password" clearable v-model="ruleForm.rePwd" />
                </el-form-item>
                <el-form-item label="用户类型">
                    <el-select v-model="ruleForm.state" class="m-2 select" placeholder="用户类型">
                        <el-option v-for="item in addAdminType" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">添加</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>


<script lang="ts" setup>
import { onActivated, reactive, ref, watch } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { commonPasswordLengthRule, getPasswordRule, getRequireRule, phoneRule, userLengthRule } from "../../../../form";
import { addUserApi } from "../../../../api/admin";
import { useUserStore } from '../../../../store/user';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'
import { addAdminType } from '../../../../select/user';
import { ArrowLeft } from '@element-plus/icons-vue'
import { logoutApi } from '../../../../api/user';
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    "username": "",
    "pwd": "",
    "rePwd": "",
    "phone": "",
    "state": 1,
})

const router = useRouter();
const route = useRoute();
const userStore = useUserStore();

onActivated(() => {
    const username: string = route.query.user as string;
    if (username) {
        ruleForm.username = username;
    }
})

const logout = () => {
    logoutApi();
    router.push({
        name: "Login"
    })
}

const rules: FormRules = {
    phone: [
        getRequireRule("请输入账号"),
        userLengthRule,
        phoneRule
    ],
    pwd: [
        getRequireRule("请输入密码"),
        commonPasswordLengthRule,
        getPasswordRule()
    ],
    username: [
        getRequireRule("请输入昵称")
    ],
    rePwd: [{
        validator(rule, value, cb) {
            if (ruleForm.pwd !== value) {
                cb(new Error("两次密码不一致"));
                return;
            }
            cb();
        },
        trigger: "blur"
    }]
}

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid, fields) => {
        if (valid) {
            const { code, msg } = await addUserApi({
                ...ruleForm
            })
            sessionStorage.setItem("addItem", JSON.stringify({
                ...ruleForm
            }))
            if (code === 200) {
                ElMessage({
                    message: "用户添加成功",
                    type: "success"
                })
                router.push({
                    name: "showAddUser"
                })
            } else {
                ElMessage({
                    message: msg,
                    type: "warning"
                })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}



</script>

<style scoped lang="less">
.form-container {
    width: 80%;
    margin: 50px auto;
    box-shadow: 0 0 3px rgba(0, 0, 0, .3);
    padding: 27px;
    border-radius: 5px;
}

.select {
    width: 100%;
    margin-bottom: 10px;
}
</style>